<template>
    <div class="scroll_box" style="height: 200px;"> <!-- 确保高度足够 -->
      <vue-seamless-scroll
        :class-option="defineScroll"
      >
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            :class="{
              'green-text': item.time < 0,
              'red-text': item.time > 0,
            }"
          >
            <span class="name">{{ item.name }}</span>
            <span class="Etiology">{{ item.Etiology }}</span>
            <span class="status">{{ item.status }}</span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </template>
  
  <script>
  import vueSeamlessScroll from 'vue-seamless-scroll';
  
  export default {
    name: 'SeamlessScroll',
    components: {
      vueSeamlessScroll,
    },
    props: {
      dataList: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        // 定义滚动配置
        defineScroll: {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        },
      };
    },
  };
  </script>
  
  <style scoped lang="scss">
  .scroll_box {
    overflow: hidden;
    width: 100%;
    font-size: 1rem;
    text-align: center;
    border: 1px solid black;
  }
  
  ul {
    width: 100%;
    li {
      margin-left: -2rem;
      width: 100%;
      list-style-type: none;
      span {
        display: inline-block;
        height: 100%;
      }
      .name {
        width: 10%;
        border: 1px solid black;
      }
      .Etiology {
        width: 20%;
        border: 1px solid black;
      }
      .status {
        width: 20%;
        border: 1px solid black;
      }
      .time {
        width: 45%;
        border: 1px solid black;
      }
    }
  }
  
  .green-text {
    color: green;
  }
  
  .red-text {
    color: red;
  }
  </style>